<template>
    <div class="kfAddStaff">
        <van-nav-bar
                title="新增员工"
                left-text="返回"
                left-arrow
                border
                fixed
                @click-left="$router.go(-1)"
        />
        <div style="height:50px"></div>
        <van-cell-group>
            <van-field
                    v-model="userInfo.realname"
                    label="人员姓名"
                    placeholder=""
                    size="large"
                    required
            />
            <van-field
                    v-model="userInfo.mobile"
                    label="联系电话"
                    placeholder=""
                    size="large"
                    required
            />

            <van-field
                    v-model="userInfo.certificate_code"
                    label="身份证号"
                    placeholder=""
                    size="large"
                    required
            />
            <van-field
                    v-model="userInfo.certificate_type"
                    label="派遣工种"
                    placeholder=""
                    size="large"
                    required
            />
            <van-field
                    v-model="userInfo.unit_price"
                    label="派遣工资"
                    placeholder=""
                    size="large"
                    required
            />
            <van-field
                    readonly
                    clickable
                    :value="sexName"
                    placeholder="--选择性别--"
                    label="性别"
                    required
                    v-show="showAge"
                    @click="sexPicker = true"/>

            <van-popup v-model="sexPicker" position="bottom">
                <van-picker show-toolbar :columns="sexSource" :default-index="sexIndex" value-key="name"
                            @cancel="sexPicker = false" @confirm="onSexChange"/>
            </van-popup>
            <van-field
                    v-model="userInfo.age_str"
                    label="年龄"
                    placeholder=""
                    size="large"
                    readonly
                    v-show="showAge"
            />


            <van-field
                    v-model="userInfo.address"
                    label="家庭住址"
                    placeholder=""
                    size="large"
                    required
            />
        </van-cell-group>
        <div class="foot-btn">
            <div class="blue-btn" @click="setUserInfo('edit_save')">保存</div>
            <div class="red-btn" @click="$router.go(-1)">取消</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "kfHumanAdd",
        data() {
            return {
                sexSource: [
                    {name: '男', id: 1},
                    {name: '女', id: 2}
                ],
                sexIndex: 0,
                sexName: '',
                sexPicker: false,
                showAge: true,
                pagetype: '',
                userInfo: {
                    realname: '',
                    certificate_code: '',
                    mobile: '',
                    address: '',
                    age_str: '',
                    certificate_type: '',
                    unit_price: '',
                },
            };
        },
        methods: {
            judgeType() {
                this.pagetype = this.$route.query.type
                if (this.pagetype == 'add') {
                    this.showAge = false
                } else {
                    this.setUserInfo()
                }
            },
            setUserInfo(type) {
                let params = {
                    token: localStorage.getItem('token'),
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    id: this.$route.query.id,
                    opmode: type || 'edit_read',
                };

                if (this.pagetype == 'editor') {
                    if (type == 'edit_save') {
                        params.realname = this.userInfo.realname
                        params.certificate_code = this.userInfo.certificate_code
                        params.mobile = this.userInfo.mobile
                        params.sex = this.sexIndex
                        params.certificate_type = this.userInfo.certificate_type
                        params.unit_price = this.userInfo.unit_price
                        params.address = this.userInfo.address
                        params.types = 2
                    }
                    if (params.unit_price == '') {
                        this.$toast('请输入派遣工资')
                        return
                    }
                    if (params.address == '') {
                        this.$toast('请输入家庭住址')
                        return
                    }

                    this.$post("/api/order_roster/edit_pool", params)
                        .then(res => {
                            if (res.code == 1) {
                                if (type == 'edit_save') {
                                    this.$toast.success('保存成功');
                                    this.$router.go(-1)
                                    return
                                }
                                this.userInfo = res.data
                                if (res.data.sex == 1) {
                                    this.sexName = '男'
                                } else {
                                    this.sexName = '女'
                                }

                            }
                        }).catch(err => {
                    });
                } else {
                    this.addNewHuman()
                }

            },
            addNewHuman() {
                let data = {}
                data.token = localStorage.getItem('token')
                data.wx_member_id = localStorage.getItem('wx_member_id')
                data.member_goods_id = this.$route.query.id
                data.cate_id = 4
                data.types = 2
                data.realname = this.userInfo.realname
                data.certificate_code = this.userInfo.certificate_code
                data.mobile = this.userInfo.mobile
                data.certificate_type = this.userInfo.certificate_type
                data.unit_price = this.userInfo.unit_price
                data.address = this.userInfo.address
                if (data.unit_price == '') {
                    this.$toast('请输入派遣工资')
                    return
                }
                if (data.address == '') {
                    this.$toast('请输入家庭住址')
                    return
                }
                this.$post("/api/order_roster/add_pool", data)
                    .then(res => {
                        if (res.code == 1) {
                            this.$toast.success('保存成功');
                            this.$router.go(-1)
                        } else {
                            this.$toast(res.msg)
                        }
                    }).catch(err => {

                });
            },
            onSexChange(value, index) {
                this.sexIndex = value.id;
                this.sexName = value.name
                this.sexPicker = false;
            },

        },
        created() {
            // 实例创建完成
            this.judgeType()
        },
        beforeCreate() {
            document.querySelector("body").setAttribute("style", "background-color:#fff");
        }
    }
</script>

<style scoped lang='less'>
    .radio {
        display: flex;
        align-items: center;
        padding: 10px 9px;

        > div:nth-of-type(1) {
            width: 116px;
            font-size: 13px;
            color: #323233;
        }

        > div:nth-of-type(2) {
            font-size: 12px;

        }
    }

    .selects-box {
        display: flex;
        align-items: center;
        padding: 10px 10px;

        > div:nth-of-type(1) {
            width: 116px;
        }

        > div:nth-of-type(2) {
            border: 1px solid #dcdcdc;
            border-radius: 3px;
            flex: 1;
            height: 30px;
        }
    }

    .businessMan-box {
        /*height: 100px;*/
    }

    .foot-btn {
        padding-bottom: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
</style>